<template>
  <div id="app">
    <div class="login-container">
      <div class="login-box">
        <div class="login-write">
          <el-form :model="loginForm" :rules="loginRules" ref="loginForm" label-width="0px" class="login-form">
            <el-form-item prop="username" class="form-item">
              <el-input v-model="loginForm.username" placeholder="用户名"></el-input>
              </el-form-item>
              <el-form-item prop="password" class="form-item">
                <el-input type="password" v-model="loginForm.password" placeholder="密码"></el-input>
                </el-form-item>
          </el-form>
        </div>
        <el-button type="primary" @click="handleLogin">登录</el-button>
        <el-link type="primary" @click="$router.push({ name: 'register' })">还没有账号？注册</el-link>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { jwtDecode } from 'jwt-decode'; // 使用jwtDecode函数

export default {
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      loginRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          axios.post('http://localhost:8081/api/auth/login', null, {
            params: {
              username: this.loginForm.username,
              password: this.loginForm.password
            }
          })
              .then(response => {
                // 处理登录成功逻辑，例如保存token
                const token = response.data.token;
                localStorage.setItem('token', token); // 假设返回的token在response.data.token
                localStorage.setItem('username', this.loginForm.username);
                const decodedToken = jwtDecode(token); // 解码JWT获取用户信息
                const role = decodedToken.role; // 假设JWT中包含role字段

                ElMessage({
                  message: '登录成功',
                  type: 'success',
                  duration: 2000
                });

                // 根据用户角色跳转到不同页面
                if (role === 'manager') {
                  this.$router.push({ name: 'managerinterface' }); // 管理员界面
                } else {
                  this.$router.push({ name: 'userinterface' }); // 用户界面
                }
              })
              .catch(error => {
                // 处理登录失败逻辑
                console.error('登录失败:', error);
                ElMessage.error('登录失败，请检查用户名和密码');
              });
        } else {
          console.log('错误: 验证失败。');
          return false;
        }
      });
    }
  }
};
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #76ecf8;
}

.login-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 400px; /* 修改宽度 */
  height: 300px;
  padding: 20px; /* 减少padding */
  background-color: #ffffff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.login-write {
  width: 100%;
  height: 130px;
}

.form-item {
  margin-bottom: 20px; /* 增加input之间的距离 */
}

.el-button {
  width: 100%;
}
</style>
